<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<script src="../gauge.min.js"></script>
</head>
<body style="background:#222">
<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>
<hr>
<canvas data-type="linear-gauge"
data-width="160"
data-height="600"
data-border-radius="20"
data-borders="0"
data-bar-begin-circle="false"
data-title="Temperature"
data-units="°C"
data-minor-ticks="10"
data-value="99"
data-min-value="10"
data-max-value="30"
data-major-ticks="10, 20, 30"
data-highlights='[
{"from": 10, "to":20, "color": "blue"},
{"from": 20, "to": 30, "color": "red"}
]'
data-tick-side="right"
data-number-side="right"
data-needle-side="right"
data-animation-rule="bounce"
data-animation-duration="750"
data-bar-stroke-width="5"
data-value-box-border-radius="0"
data-value-text-shadow="false"
></canvas>
<canvas data-type="linear-gauge"
data-width="160"
data-height="600"
data-border-radius="20"
data-borders="0"
data-bar-begin-circle="false"
data-title="Temperature"
data-units="°C"
data-minor-ticks="10"
data-value="99"
data-min-value="-30"
data-max-value="30"
data-major-ticks="-30, -20, -10, 0, 10, 20, 30"
data-highlights='[
{"from":-30, "to":0, "color": "blue"},
{"from": 0, "to": 30, "color": "red"}
]'
data-tick-side="right"
data-number-side="right"
data-needle-side="right"
data-animation-rule="bounce"
data-animation-duration="750"
data-bar-stroke-width="5"
data-value-box-border-radius="0"
data-value-text-shadow="false"
></canvas>
<br>
<canvas data-type="linear-gauge"
data-width="600"
data-height="160"
data-border-radius="0"
data-borders="0"
data-bar-begin-circle="false"
data-title="Temperature"
data-units="°C"
data-value="25.5"
data-bar-stroke-width="5"
data-min-value="-30"
data-max-value="30"
data-major-ticks="-30, -20, -10, 0, 10, 20, 30"
data-highlights='[
{"from":-30, "to":0, "color": "blue"},
{"from": 0, "to": 30, "color": "red"}
]'
></canvas>
<br>
<canvas data-type="linear-gauge"
data-width="600"
data-height="160"
data-border-radius="0"
data-borders="0"
data-bar-begin-circle="false"
data-title="Temperature"
data-units="°C"
data-value="25.5"
data-bar-stroke-width="5"
data-min-value="10"
data-max-value="30"
data-major-ticks="10, 20, 30"
data-highlights='[
{"from": 10, "to":20, "color": "blue"},
{"from": 20, "to": 30, "color": "red"}
]'
></canvas>
<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(cb) {
var i = 0, s = this.length;
for (; i < s; i++) {
cb && cb(this[i], i, this);
}
}
}
var timers = [];
function animateGauges() {
document.gauges.forEach(function(gauge) {
timers.push(setInterval(function() {
gauge.value = Math.random() *
(gauge.options.maxValue - gauge.options.minValue) +
gauge.options.minValue;
}, gauge.animation.duration + 500));
});
}
function stopGaugesAnimation() {
timers.forEach(function(timer) {
clearInterval(timer);
});
}
</script>
</body>
</html>